<template>
  <div>
    <van-nav-bar
      title="确定订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="order_pay_address" @click="address_show = true">
      {{ default_address.name }} {{ default_address.tel }}
      <van-tag v-if="default_address.isDefault" type="danger">默认地址</van-tag>
      <br />
      {{ default_address.address }}
    </div>
    <div class="order_pay_div">
      <div>
        总数量 {{ order.sum }}
        <span style="max-width: 25vw; color: rgb(238, 10, 36); float: right">
          {{ order.total_amount }}￥
        </span>
      </div>
      <div>
        支付方式&emsp;
        <van-image
          fit="cover"
          position="center"
          :src="this.img_address"
          width="50"
          height="50"
          @click="pay_order(1)"
        >
        </van-image>
      </div>
    </div>
    <div class="order_pay_goods_list">
      <div class="order_paygoods_show" v-for="(item, i) in goods" :key="i">
        <van-image
          fit="cover"
          position="center"
          :src="item.image"
          width="50"
          height="50"
          class="order_paygoods_image"
          @click="goods_desc_show(item)"
        >
          <template v-slot:error>加载失败</template>
        </van-image>
        <div class="order_paygoods_desc">
          <div class="van-ellipsis">
            {{ item.name }}
          </div>
          <div class="order_paygoods_desc_data">
            <span style="color: #ee0a24">{{ item.price }}￥</span>
            <van-stepper
              v-model="order.goods[i].sum"
              style="float: right"
              integer
              min="0"
              max="999"
              :change="order_price()"
            />
          </div>
          <div class="order_paygoods_desc_data">
            <span style="color: #ee0a24; float: right"
              >{{ order.goods[i].sum_price }}￥</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 地址 -->
  <van-popup
    v-model:show="address_show"
    round
    position="bottom"
    class="order_pay_add_address"
  >
    <van-address-list
      v-model="address_id"
      :list="user_address"
      default-tag-text="默认"
      @add="path_address"
      @edit="path_address"
      @select="select_address"
    ></van-address-list>
  </van-popup>
</template>

<script>
import { onClickLeft } from "../../utlis/utils";
export default {
  data() {
    return {
      onClickLeft,
      img_address:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fandroid-imgs.25pp.com%2Ffs08%2F2016%2F05%2F30%2F25%2F0%2F110_69cb4a4838f04b60bbcd0b8b72dcbc3c_con.png&refer=http%3A%2F%2Fandroid-imgs.25pp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661929068&t=e551e9c93ebdea71178af8e662f2a156",
      isloading: false,
      order: JSON.parse(this.$route.query.order),
      goods: JSON.parse(this.$route.query.goods),
      user_address: [],

      default_address: {},
      address_id: null,
      address_show: false,
      user_id:localStorage.getItem('id')
    };
  },
  mounted() {
    // let order = this.$route.query.order
    // let goods = this.$route.query.goods
    // if(!order & !goods){
    //     console.log('未接收到数据')
    // }else{
    //     this.order = JSON.parse(order)
    //     this.goods = JSON.parse(goods)
    // }
    this.submit();

  },
  methods: {
    // 获取地址
    submit: function () {
      this.myaxios(this.host + "users/address/", "get", {
        id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          let address_list = data.data;
          this.user_address = [];
          for (let i in address_list) {
            if (address_list[i].is_default == true) {
              this.default_address = {
                id: address_list[i].id,
                name: address_list[i].nickname,
                tel: address_list[i].mobile,
                address: address_list[i].address,
                isDefault: address_list[i].is_default,
              };
              this.address_id = address_list[i].id;
            }
            let address = {
              id: address_list[i].id,
              name: address_list[i].nickname,
              tel: address_list[i].mobile,
              address: address_list[i].address,
              isDefault: address_list[i].is_default,
            };

            this.user_address.push(address);
          }
          this.isloading = false;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    // 统计数量和价格
    order_price() {
      let sum_price = 0;
      let sum = 0;
      for (let i in this.order.goods) {
        if (this.order.goods[i].sum != 0) {
          sum += this.order.goods[i].sum;
          let price =
            this.order.goods[i].sum * parseFloat(this.order.goods[i].price);
          price = parseInt(price * 100);
          this.order.goods[i].sum_price = price / 100;
          sum_price += price;
        }
      }
      this.order.total_amount = sum_price / 100;
      this.order.sum = sum;
    },
    // 选择地址
    select_address(val) {
      console.log(val);
      this.default_address = val;
      this.address_id = val.id;
      this.address_show = false;
    },
    path_address() {
      this.$router.push("/index/user_address");
    },
    // 生成订单 和支付地址
    pay_order(pay_method) {
      this.order.sum = 0;
      this.order.sum_price = 0;
      let shopping_list = [];
      for (let i in this.order.goods) {
        if (this.order.goods[i].sum != 0) {
          let price =
            this.order.goods[i].sum * parseFloat(this.order.goods[i].price);
          price = parseInt(price * 100);
          this.order.goods[i].sum_price = price / 100;
          shopping_list.push(this.order.goods[i]);

          this.order.sum += this.order.goods[i].sum;
          this.order.sum_price += price;
        }
      }
      this.order.sum_price = this.order.sum_price / 100;

      if (shopping_list.length == 0 || this.order.sum_price == 0) {
        this.$toast.fail("请选择商品！");
        return;
      };
      this.myaxios(this.host + 'users/order/','post',{
        user_id:this.user_id,
        shops_id:this.order.shops_id,
        goods:JSON.stringify(shopping_list),
        pay_method:pay_method,
        sum: this.order.sum,
        total_amount: this.order.sum_price,
        address_id: this.address_id,
      })
        .then((data) => {
          console.log("获取支付地址", data);
          if (data.errcode == 0) {
            window.location.href = data.url;
          } else {
            this.$toast.fail(data.msg);
          }
        })
        .catch((err) => {
          this.$toast.fail("服务器错误！");
          console.log(err);
        });
    },
  },
};
</script>

<style>
.order_pay_add_address{
  padding: 20px 0px;
}

.order_pay_address{
  padding: 3vw;
  width: calc(100% - 6vw);
  height: 15vw;
  line-height: 7vw;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  border-top: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
}
.order_pay_div{
  padding: 3vw;
  width: calc(100% - 6vw);
  height: 23vw;
  line-height: 7vw;
  background-color: white;
  border-top: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
}

.order_pay_desc{
  float: left;
  padding-left: 3vw;
  width: calc(100% - 23vw);
}
.order_pay_title{
  height: 5vw;
}
.order_pay_desc_data{
  margin-top: 1vw;
  color: #969799;
  line-height: 4vw;
  font-size: 3vw;
}

.order_pay_goods_list{
  width: calc(100%);
  height: calc(100vh - 38vw - 96px);
  overflow-x: hidden;
  overflow-y: scroll;
}



.order_paygoods_show{
  padding: 3vw;
  width: calc(100% - 6vw);
  min-height: 22vw;
  height: auto;
  overflow:hidden;
  background-color: white;
}
.order_paygoods_image{
  float: left;
  width: 22vw;
  height: 22vw;
  border-radius: 5px;
}
.order_paygoods_desc{
  float: left;
  padding-left: 3vw;
  width: calc(100% - 25vw);
}
.order_paygoods_desc_data{
  padding-top: 2vw;
  color: #969799;
  line-height: 6vw;
  font-size: 3vw;
}

</style>